/*
 *
 * @ProjectName:    my_umi_app
 * @Package:
 * @ClassName:      show_ad_widget
 * @Description:    广告轮播图
 * @Author:         SuPeiSen
 * @CreateDate:     2021/3/5 12:03 下午
 * @UpdateDate:     2021/3/5 12:03 下午
 * @UpdateRemark:   更新说明：
 * @Version:        1.0
 */

import { AppImageUrl } from '@/config/app_config';
import { openUrl } from '@/utils/app_fun';
import { BlogAdOnClick, BlogGetAdListApi } from '@/service/blog/blog_ad_api';
import { Carousel } from 'antd';
import React, { useContext, useEffect, useState } from 'react';
import { BlogAdItemType } from '@/type/blog/ad_type';
import { BlogAdListContext } from '@/provider/ad_list_context';

/**
 * 广告组件
 * @constructor
 * @param props
 */

export const ShowAdWidget = () => {
  // 获取共享数据
  const adListContext = useContext(BlogAdListContext);

  return (
    <Carousel autoplay>
      {adListContext.map((ad) => {
        return (
          <div
            key={ad.id}
            style={{
              height: '160px',
              lineHeight: '160px',
              backgroundColor: '#364d79',
            }}
          >
            <img
              className="ad_blog_image"
              src={AppImageUrl(ad.ad_image)}
              alt=""
              onClick={() => {
                openUrl(ad.ad_url);
                BlogAdOnClick(ad.id);
              }}
            />
          </div>
        );
      })}
    </Carousel>
  );
};
